import { SVG, Svg, Circle } from '@svgdotjs/svg.js'
import {
    playBetClickSound,
    playSoftWinSound,
    playBombDetectSound
  } from '@/utils/sound';
import Message from '../Message';

export default class BetGame {

    // 顶部正方形的边长
    squareSize = 100; 
     // 顶部正方形的长
    squarex = 0;
     // 顶部正方形的长
    squarey = 20;
    // 最外层svg
    draw: Svg;
    // svg尺寸
    svgNodeDom;
    // 按钮的半径
    btnRadius = 30;
     // 按钮位置x
    btnY = 0;
    // 按钮位置x
    btnX = 0;
    // 进度条宽度
    strokeWidth = 10;
    // 进度条
    progressCircle: Circle;
    ball: Circle;
    // 动画是否执行完毕
    animateEnd = true;
    constructor(container: HTMLDivElement){
        this.draw = SVG().addTo(container!).size(document.body.clientWidth, document.body.clientHeight);
        this.svgNodeDom = this.draw.node.getBoundingClientRect();
        // 创建中奖方块
        this.createWinDoor();
        // 创建底部带进度条btn
        this.createPlayBtn()
        // 初始化小球
        this.createBall();
        console.log(12312,  this.animateEnd);
    }

    createWinDoor(){
        // 设置
        // 获取SVG容器的宽高
        const { width } = this.svgNodeDom;
        // 计算正方形的x和y坐标，使其居中
        this.squarex = (width - this.squareSize) / 2;
        // 创建并绘制正方形
        this.draw.rect(this.squareSize, this.squareSize).attr({
            x: this.squarex,
            y: this.squarey,
            fill: '#3498db', // 设置填充颜色
        });

        // 添加文字，并将其水平垂直居中
        const text = this.draw.text('赢了').font({
            size: 16,
            anchor: 'middle',
            fill: 'red' // 设置文字颜色
        });

        // 将文字定位到正方形中心
        text.amove(this.squarex + this.squareSize / 2, this.squarey + this.squareSize / 2).attr({
            'dominant-baseline': 'middle', // 垂直居中
        });

    }

    createPlayBtn(){
        // 获取SVG容器的宽高
        const { width, height } = this.svgNodeDom;
    
        // 创建中心点坐标
        this.btnY = height - 50;
        this.btnX = width  / 2;
        // 创建主圆形
        const circle = this.draw.circle(this.btnRadius * 2).attr({
          cx: this.btnX,
          cy: this.btnY,
          fill: '#ffffff', // 圆形填充色
          stroke: '#cccccc', // 圆形外边框颜色
          'stroke-width': this.strokeWidth,
        });
        // 添加文字，并将其水平垂直居中
        const text = this.draw.text('PLAY').font({
          size: 16,
          anchor: 'middle',
          fill: 'red' // 设置文字颜色
        });
    
        // 将文字定位到正方形中心
        text.amove(this.btnX , this.btnY ).attr({
          'dominant-baseline': 'middle', // 垂直居中
        });
    
        // 创建进度条圆弧
        this.progressCircle = this.draw.circle(this.btnRadius * 2).attr({
          cx: this.btnX,
          cy: this.btnY,
          fill: 'none',
          opacity: 0,
          stroke: '#3498db', // 进度条颜色
          'stroke-width': this.strokeWidth,
          'stroke-dasharray': Math.PI * this.btnRadius, // 进度条路径的总长度
          'stroke-dashoffset': Math.PI * this.btnRadius, // 初始偏移量，隐藏进度条
          'stroke-linecap': 'round', // 圆角样式
          transform: `rotate(-90 ${this.btnX} ${this.btnY})` // 旋转进度条起始位置至顶部
        });
      // 监听圆形点击事件，触发进度条动画
      circle.on('click', this.fire.bind(this));
      text.on('click', this.fire.bind(this));

    }
    createBall(){
      // 创建小球
      this.ball = this.draw.circle(20).attr({
        fill: "#e74c3c",
        cx: this.btnX,
        cy: this.btnY,
        opacity: 1, // 初始透明度为0
      }).back();
    }
    fire() {
        console.log(12312,  this);
        // 停止进度条当前的动画
        if(this.animateEnd){
            // 播放声音
            playBetClickSound();
            // 小球做动画
            this.animateBall();
            this.progressCircle.attr({ 'stroke-dashoffset': Math.PI * this.btnRadius, opacity: 1 }); // 重置进度条
            this.animateProgress(); // 开始动画
        }
    }
    // 设置进度条动画
    animateProgress() {
        this.animateEnd = false;
        // 从 0 到 100% 的进度
        this.progressCircle
            .animate(1000) // 动画持续时间为 2 秒
            .attr({ 'stroke-dashoffset': 0 }) // 进度条从0到100%
            .after(async () => { 
                // 进度条达到 100% 后让其淡出
                this.progressCircle.animate(1000).attr({ opacity: 0 }).after(() => {
                    this.animateEnd = true;
                });
            });
    }
    animateBall(){
        const { width } = this.svgNodeDom;
        const singleWidth  = width / 4;
        const pathArr = [
            `M${this.btnX},${this.btnY} L${this.btnX},${this.squarey}`,
            `M${this.btnX},${this.btnY} L${singleWidth},${this.squarey}`,
            `M${this.btnX},${this.btnY} L${width - singleWidth},${this.squarey}`,
        ]
        // 随机成功或者失败
        const randomNum = Math.floor(Math.random() * 3);
        const path = this.draw.path(pathArr[randomNum]);
        this.ball.opacity(1) // 将小球透明度设置为1
        .animate(2000) // 动画时间为3秒
        .during((pos: number) => {
            // 沿路径移动
            const movePoint = path.pointAt(pos * path.length());
            this.ball.cx(movePoint.x).cy(movePoint.y);
            // 渐隐透明度从1到0
            this.ball.opacity(1 - pos);
        })
        .after(() => {
            this.ball.opacity(0); // 动画结束时确保透明度为0
            if(randomNum === 0){
                Message.error(1000, {text: '中奖'})
                playSoftWinSound();
            }else{
                playBombDetectSound()

                Message.error(1000, {text: 'miss'})
            }
        });
    }
}